<template>
  <div>
    <div class="crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item><i class="el-icon-date"></i> 发布文章</el-breadcrumb-item>
        <el-breadcrumb-item>文章编辑</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="container">
      <div class="plugins-tips">
        文章编辑
      </div>
      <mavon-editor v-model="content"
                    ref="md"
                    @imgAdd="$imgAdd"
                    @change="change"
                    style="min-height: 600px" />
      <el-button class="editor-btn"
                 type="primary"
                 @click="submit">提交</el-button>
    </div>
  </div>
</template>

<script>
import { mavonEditor } from 'mavon-editor'
import 'mavon-editor/dist/css/index.css'
export default {
  name: 'PublishArticle',
  data: function () {
    return {
      content: '',
      html: '',
      configs: {
      }
    }
  },
  components: {
    mavonEditor
  },
  methods: {
    // 将图片上传到服务器，返回地址替换到md中
    $imgAdd (pos, $file) {
      var formdata = new FormData();
      formdata.append('file', $file);//调服务器
      this.$axios({
        url: '/common/upload',
        method: 'post',
        data: formdata,
        headers: { 'Content-Type': 'multipart/form-data' },
      }).then((url) => {
        this.$refs.md.$img2Url(pos, url);
      })
    },
    change (value, render) {
      // render 为 markdown 解析后的结果
      this.html = render;
    },
    submit () {
      this.$confirm('', '编辑成功', {
        type: 'success',//icon样式
        showConfirmButton: false,//是否展示确定按钮
        center: true,//内容支持居中布局
        showCancelButton: false,//是否显示取消按钮
        modal: false,//取消遮罩层
        width: '40px'
      })
    }
  }
}
</script>
<style scoped>
.editor-btn {
  margin-top: 20px;
}
</style>
<style>
.el-message-box {
  width: 200px;
}
.el-message-box--center {
  padding-bottom: 0;
}
</style>